<template>
  <div class="box">
    <header>
      <van-nav-bar title="管理收货地址">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
      </van-nav-bar>
    </header>
    <main>
      <div class="addressList">
        <van-swipe-cell v-for="(item, index) in list" :key="index">
        <van-card>
          <template #title>
            <h4>{{item.name}}<span>{{item.tel}}</span></h4>
            <p>{{item.province}} {{item.city}} {{item.county}} {{item.addressDetail}}</p>
          </template>    
          <template #tags  v-if="item.isDefault">
            <van-tag plain type="danger">默认</van-tag>
          </template>     
          <template #num>
            <van-icon name="edit" size="24" @click="$router.push('/updateaddress/'+item.addressid)"/>
          </template>     
        </van-card>
      </van-swipe-cell>
      </div>
      <van-button round @click="$router.push('/addadress')" type="info" block color="linear-gradient(to right, #ff6034, #ee0a24)">添加地址</van-button>
    </main>
  </div>
</template>

<script>
import { addressList ,} from "../api/user";

export default {
  data() {
    return {
      flag: false,
      list: [],
    };
  },
  created() {
    addressList({ userid: localStorage.getItem("userid") }).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.list = res.data.data;
        res.data.data.forEach(item => {
          if(item.isDefault==true)
          localStorage.setItem("defaultAddress",JSON.stringify(item))
        });
      }
    });
  },
};
</script>

<style scoped>
.box{
  height: 100%;
  display: flex;
  flex-direction: column;
}
::v-deep .van-card {
  flex: 1;
  height: 1rem;
  border: .01rem solid red;
  margin: .1rem;
  border-radius: .08rem;
}
header{
  display: fixed;
  top: 0;
}
main{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  justify-content: space-between;
}
main .addressList{
  flex: 1;
  overflow-y: auto;
}
.van-card h4{
  font-size: .20rem;
}
.van-card h4 span{
  font-size: .14rem;
  color: #888;
  margin: 0 .04rem;
}
.van-card p{
  font-size: .14rem;
  margin: .1rem 0;
}
::v-deep .van-icon-edit{
  position: absolute;
  right: 0;
  bottom: .36rem;
}
::v-deep .van-button{
  display: fixed;
  margin: .1rem 0;
}
</style>